<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(function() {
	
		$("#province").change(function() {
			$("#city option:not(:first)").remove();
			$("#district option:not(:first)").remove();

			var province = $(this).val();

			if (province != "default") {
				var url = "https://restapi.amap.com/v3/config/district";
				var args = {
					"keywords" : province,
					"subdistrict" : 1,
					"key" : "b0a5c46bddf0e775b119fb90a9f2c4c2"
				};
				$.getJSON(url, args, function(data) {
					var datas = data.districts[0].districts;
					for (var i = 0; i < datas.length; i++) {
						var adcode = datas[i].adcode;
						var name = datas[i].name;
						$("#city").append("<option value='" + adcode + "'>" + name + "</option>");
					}
				});
			}
		});
		
		$("#city").change(function(){
			$("#district option:not(:first)").remove();
			var city = $(this).val();
			
			if(city != "default"){
				var url = "https://restapi.amap.com/v3/config/district";
				var args = {
					"keywords" : city,
					"subdistrict" : 1,
					"key" : "b0a5c46bddf0e775b119fb90a9f2c4c2"
				};
				$.getJSON(url, args, function(data) {
					var datas = data.districts[0].districts;
					for (var i = 0; i < datas.length; i++) {
						var adcode = datas[i].adcode;
						var name = datas[i].name;
						$("#district").append("<option value='" + adcode + "'>" + name + "</option>");
					}
				});
			}		
		});
	})
</script>
</head>

<body>
	<!-- https://lbs.amap.com/api/webservice/guide/api/district/ -->
	<select name="province" id="province">
		<option value="default" selected="selected">请选择</option>
		<option value="北京">北京</option>
		<option value="上海">上海</option>
		<option value="天津">天津</option>
		<option value="重庆">重庆</option>
		<option value="河北">河北</option>
		<option value="山西">山西</option>
		<option value="辽宁">辽宁</option>
		<option value="吉林">吉林</option>
		<option value="黑龙江">黑龙江</option>
		<option value="江苏">江苏</option>
		<option value="浙江">浙江</option>
	</select>

	<select name="city" id="city">
		<option value="default" selected="selected">请选择</option>
	</select>

	<select name="district" id="district">
		<option value="default" selected="selected">请选择</option>
	</select>
</body>
</html>
